<template>
	<view>
		<view class="dsr">
			第三人
		</view>
		<view class="contentView flex-row-space-between" style="margin-top: 20rpx;">
			<view class="flex-row-flex-start">
				<view class="name2">
					姓名
				</view>
				<input @input="textInput" :disabled="isEdit" v-model="infoDic.thirdpersonname" class="inputView2" placeholder="请输入"/>
			</view>
			<view class="flex-row-flex-end">
				<view @click="diSanRenTypeClick(1)" class="flex-row-flex-start" style="margin-left: 40rpx;">
					<image class="sexIcon" :src="infoDic.thirdpersontype==1?'/static/itemIcon_select.png':'/static/itemIcon_unselect.png'"></image>
					<view class="sexText">单位</view>
				</view>
				<view @click="diSanRenTypeClick(2)" class="flex-row-flex-start" style="margin-left: 40rpx;">
					<image class="sexIcon" :src="infoDic.thirdpersontype==2?'/static/itemIcon_select.png':'/static/itemIcon_unselect.png'"></image>
					<view class="sexText">个人</view>
				</view>
			</view>
		</view>
		<view v-if="infoDic.thirdpersontype==2" class="contentView flex-row-space-between">
			<view class="name">
				性别
			</view>
			<view class="flex-row-flex-start" style="width: 206rpx;">
				<view @click="partysexClick(1)" class="flex-row-flex-start">
					<image :src="infoDic.thirdpersonsex==1?'/static/itemIcon_select.png':'/static/itemIcon_unselect.png'" class="sexIcon"></image>
					<view class="sexText">男</view>
				</view>
				<view @click="partysexClick(2)" class="flex-row-flex-start" style="margin-left: 60rpx;">
					<image :src="infoDic.thirdpersonsex==2?'/static/itemIcon_select.png':'/static/itemIcon_unselect.png'" class="sexIcon"></image>
					<view class="sexText">女</view>
				</view>
			</view>
		</view>
		<view v-if="infoDic.thirdpersontype==2" class="contentView flex-row-space-between">
			<view class="name">
				身份证号
			</view>
			<input @input="textInput" :disabled="isEdit" v-model="infoDic.thirdpersonidcard" class="inputView" placeholder="选填"/>
		</view>
		<view v-if="infoDic.thirdpersontype==1" class="contentView flex-row-space-between">
			<view class="name">
				统一社会信用代码
			</view>
			<input @input="textInput" :disabled="isEdit" v-model="infoDic.thirdpersoncreditcode" class="inputView" placeholder="请输入"/>
		</view>
		<view class="contentView flex-row-space-between">
			<view class="name">
				联系方式
			</view>
			<input @input="textInput" :disabled="isEdit" v-model="infoDic.thirdpersoncontact" class="inputView" placeholder="请输入"/>
		</view>
	</view>
</template>

<script>
	export default {
		name:"diSanRen",
		props: {
			//当前组件内容信息
			infoDic: {
				type: Object,
				default: function() {
					return {
						thirdpersonname: '',
						thirdpersontype:1,//第三人类型（1.单位 2个人
						thirdpersonsex: 1,//性别 （1.男 2 女）
						thirdpersonidcard:'',
						thirdpersoncreditcode:'',
						thirdpersoncontact:''
					};
				}
			},
			//当前组件是否可编辑
			isEdit: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				
			};
		},
		methods:{
			textInput(){
				console.log('this.infoDic----',this.infoDic)
				this.$emit('diSanRenInfoCallBack', this.infoDic)
			},
			diSanRenTypeClick(index){
				if (this.isEdit==true) {
					return
				}
				this.infoDic.thirdpersontype = index
				this.textInput()
			},
			//设置性别
			partysexClick(index){
				if (this.isEdit==true) {
					return
				}
				this.infoDic.thirdpersonsex = index
				this.textInput()
			},
		}
	}
</script>

<style>
	.sexIcon{
		width: 36rpx;
		height: 36rpx;
		/* background-color: #E93548; */
	}
	.sexText{
		margin-left: 10rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}
	.inputView{
		width: 440rpx;
		margin-left: 12rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		text-align: right;
	}
	.inputView2{
		width: 160rpx;
		margin-left: 88rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		text-align: left;
	}
	.inputView3{
		width: 200rpx;
		margin-left: 88rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		text-align: right;
	}
	.inputView4{
		width: 456rpx;
		margin-left: 88rpx;
		font-family: DIN, DIN;
		font-weight: 500;
		font-size: 36rpx;
		color: #FF4C4C;
		text-align: left;
	}
	.name{
		width: 250rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}
	.name2{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}
	.name3{
		width: 180rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}
	.contentView{
		padding-left: 24rpx;
		padding-right: 24rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
	.contentView2{
		padding-left: 24rpx;
		padding-right: 24rpx;
		padding-top: 10rpx;
		padding-bottom: 20rpx;
	}
	.dsr{
		margin-left: 24rpx;
		margin-top: 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}
</style>